<template>
  <div>
    <ZgDialog
      title="修改继承"
      v-model="visible"
      @ok="save">
      <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-item label="选择流程" required>
          <ZgSelect v-model="saveForm.targetFlowId" :options="flowOptions" @change="flowChange"></ZgSelect>
        </a-form-item>
        <a-form-item label="选择环节" required>
          <ZgSelect v-model="saveForm.targetStepId" :options="stepOptions" @change="stepChange"></ZgSelect>
        </a-form-item>
        <a-form-item label="选择表单" required >
          <ZgSelect v-model="saveForm.targetFormId" :options="formOptions" @change="formChange"></ZgSelect>
        </a-form-item>
        <a-form-item label="选择字段" required >
          <ZgSelect :options="fieldOptions" v-model="saveForm.targetColumn" @change="fieldChange"></ZgSelect>
        </a-form-item>
        <a-form-item label="继承方式" required >
          <ZgSelect :options="wayOptions" v-model="saveForm.extendType"></ZgSelect>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  props: {
    flowInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      visible: false,
      flowOptions: [],
      stepOptions: [],
      formOptions: [],
      fieldOptions: [],
      allStepsMap: {},
      wayOptions: [
        {
          label: '求和',
          value: '求和'
        },
        {
          label: '取第一个',
          value: '取第一个'
        }
      ],
      saveForm: {
        sourceStepId: '',
        sourceFlowId: '',
        sourceFormId: '',
        sourceField: '',
        sourceColumn: '',
        targetFlowId: '',
        targetStepId: '',
        targetFormId: '',
        targetField: '',
        targetColumn: '',
        extendType: ''
      }
    }
  },
  methods: {
    open (info) {
      this.reset()
      this.saveForm.sourceColumn = info.sourceColumn
      this.saveForm.sourceField = info.sourceField
      this.saveForm.sourceStepId = info.StepId
      this.saveForm.sourceFormId = info.FormId
      this.visible = true
      const first = {
        value: this.flowInfo.id,
        label: `${this.flowInfo.name}【${this.flowInfo.code}】`
      }
      const rest = (this.flowInfo.preAutoFlows || []).map(flow => ({
        value: flow.id,
        label: `${flow.name}【${flow.code}】`
      }))
      this.flowOptions = [first, ...rest]

      // 组装 id => stepList 的对象
      const allStepsMap = {}
      allStepsMap[this.flowInfo.id] = this.flowInfo.stepList || []
      ;(this.flowInfo.preAutoFlows || []).forEach(flow => {
        allStepsMap[flow.id] = flow.stepList || []
      })
      this.allStepsMap = allStepsMap
      console.log(this.allStepsMap, 'allStepsMap')
    },
    flowChange (val) {
      this.stepOptions = (this.allStepsMap[val] || []).map(step => ({
        value: step.id,
        label: step.stepName
      }))
    },
    stepChange (val) {
      if (!val) return
      this.$http.post('/zg-autoflow/autoFlow/step/formList', { stepId: val }, (res) => {
        // 这里可以处理表单字段等逻辑
        this.formOptions = res.map(form => ({
          value: form.formId,
          label: form.formName
        }))
      })
    },
    formChange (val) {
      if (!val) return
      this.$http.post('/zg-autoflow/autoFlow/extends/getColumnsExtends', { formId: val }, (res) => {
        this.fieldOptions = res.map(field => ({
          value: field.sourceColumn,
          label: field.sourceField,
          ...field
        }))
      })
    },
    fieldChange (val) {
      const field = this.fieldOptions.find(f => f.value === val)
      this.saveForm.targetField = field ? field.sourceField : ''
    },
    save () {
      this.saveForm.sourceFlowId = this.flowInfo.id
      console.log(this.saveForm, 'saveForm')
      this.$http.post('/zg-autoflow/autoFlow/extends/add', this.saveForm, (res) => {
        this.$message.success('继承配置成功')
        this.close()
        this.$emit('refresh', true)
      })
    },
    reset () {
      this.saveForm.targetFlowId = ''
      this.saveForm.targetStepId = ''
      this.saveForm.targetFormId = ''
      this.saveForm.targetColumn = ''
      this.saveForm.extendType = ''
    },
    close () {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
